<template>
  <div>
    <SearchForm
      v-model:form="form"
      @search="handleSearch"
    />
    <PaginationCard
      v-model:currentPage="paginationData.currentPage"
      v-model:pageSize="paginationData.pageSize"
      :total="paginationData.total"
      :load-list="getTableData"
    >
      <AppTable
        :data="tableData"
        :columns="columns"
        border
      />
    </PaginationCard>
    <Drawer
      v-model="visible"
      :with-header="false"
      size="50%"
      @closed="tabPaneName = 'action'"
    >
      <el-tabs
        v-model="tabPaneName"
        type="border-card"
      >
        <el-tab-pane
          label="Action记录"
          name="action"
        >
          <ActionList
            v-if="visible"
            v-model:audit-log-id="auditLogId"
          />
        </el-tab-pane>
        <el-tab-pane
          label="entity修改记录"
          name="entity"
        >
          <EntityChangeLog
            v-if="visible"
            v-model:audit-log-id="auditLogId"
          />
        </el-tab-pane>
      </el-tabs>
    </Drawer>
  </div>
</template>

<script setup lang="tsx">
import SearchForm from './SearchForm.vue'
import AppTable from '@/components/AppTable/index.vue'
import AppButtonGroup from '@/components/AppButtonGroup/index.vue'
import PaginationCard from '@/components/PaginationCard/index.vue'
import Drawer from '@/components/Drawer/index.vue'
import ActionList from './ActionList.vue'
import EntityChangeLog from './EntityChangeLog.vue'
import { onMounted, reactive, ref } from 'vue'
import { IButtonConfig } from '@/components/AppButtonGroup/type'
import { getAuditLog } from '@/http/auditLog'
import { parseDate2Str } from '@/utils/timeUtils'
import { ElMessageBox } from 'element-plus'
import { IAuditLogParams, IAuditLogResult } from '@/http/types/auditLog'

const buttonConfig:IButtonConfig[] = [
  {
    name: '详细信息',
    eventName: 'handleDetail',
    type: 'primary'
  }
]
const columns = ref([
  { label: '用户名', prop: 'userName', width: 130 },
  { label: '请求地址', prop: 'url' },
  { label: '请求方法', prop: 'httpMethod', width: 110 },
  { label: '状态码', prop: 'httpStatusCode', width: 110 },
  { label: '耗时/ms', prop: 'executionDuration', width: 110 },
  { label: '异常信息', render: ({ row }:{row:IAuditLogResult}) => <p class="exceptions" onClick={() => lookExceptions(row.exceptions)}>{row.exceptions}</p> },
  { label: '客户端地址', prop: 'clientIpAddress' },
  { label: '浏览器信息', prop: 'url' },
  { label: '执行时间', prop: 'executionTime', formatter: (row: IAuditLogResult) => parseDate2Str(row.executionTime, 'YYYY-MM-DD HH:mm:ss') },
  {
    label: '操作',
    fixed: 'right',
    render: ({ row }:{row:IAuditLogResult}) => {
      return <AppButtonGroup
                rowData={row}
                buttonConfigs={ buttonConfig }
                onEvent={(eventName:string) => {
                  eventName === 'handleDetail' && handleDetail(row)
                }}
              >
             </AppButtonGroup>
    }
  }
])
const lookExceptions = (value:string) => {
  if (!value) return
  ElMessageBox.alert(value, '异常信息', {
    showCancelButton: true,
    showConfirmButton: false,
    cancelButtonText: '关闭',
    customClass: 'exceptionsMessageBox'
  })
}

const visible = ref(false)
const auditLogId = ref('')
const tabPaneName = ref<'action'|'entity'>('action')
const handleDetail = (actions:IAuditLogResult) => {
  auditLogId.value = actions.id
  visible.value = true
}
onMounted(() => {
  getTableData()
})
const paginationData = reactive({
  pageSize: 10,
  currentPage: 1,
  total: 0
})
const form = ref<IAuditLogParams>({
  httpMethod: '',
  hasException: '',
  httpStatusCode: '',
  url: '',
  userName: '',
  applicationName: '',
  minExecutionDuration: '',
  maxExecutionDuration: '',
  date: ['', '']
})
const tableData = ref<IAuditLogResult[]>([])

const getTableData = async () => {
  const res = await getAuditLog(
    paginationData.currentPage,
    paginationData.pageSize,
    {
      httpMethod: form.value.httpMethod,
      hasException: form.value.hasException,
      httpStatusCode: form.value.httpStatusCode,
      url: form.value.url,
      userName: form.value.userName,
      applicationName: form.value.applicationName,
      minExecutionDuration: form.value.minExecutionDuration,
      maxExecutionDuration: form.value.maxExecutionDuration,
      startTime: form.value.date && form.value.date[0],
      endTime: form.value.date && form.value.date[1]
    }
  )
  tableData.value = res.items
  paginationData.total = res.totalCount
}
const handleSearch = () => {
  paginationData.currentPage = 1
  getTableData()
}
</script>

<style scoped lang="scss">
@import '@/styles/mixin.scss';
  :deep(.exceptions){
    @include ellipsis(3);
  }
</style>
